<template>

	<loading-page v-if="pageData.loading"></loading-page>

	<view class="content" v-else>

		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>

		<view class="journal_bg">
			<view class="box">
				<view class="date" @click="dateSelect">{{pageData.year}}/{{pageData.month}}</view>
				<up-row>
					<up-col span="4">
						<view class="jy_desc">结余</view>
						<view class="jy_amount">{{pageData.total.jy.toFixed(2)}}</view>
					</up-col>
					<up-col span="4">
						<view class="jy_desc">支出</view>
						<view class="jy_amount">{{pageData.total.zc.toFixed(2)}}</view>
					</up-col>
					<up-col span="4">
						<view class="jy_desc">收入</view>
						<view class="jy_amount">{{pageData.total.sr.toFixed(2)}}</view>
					</up-col>
				</up-row>
			</view>
		</view>


		<view class="journal_list" :style="{height:pageData.journalHeight+'px'}">
			<up-empty mode="list" v-if="pageData.journalList.length<1">
			</up-empty>

			<view class="item" v-for="item in pageData.journalList">
				<view class="tools">
					<up-row>
						<up-col span="6">
							<view style="color: cadetblue;font-weight: 600;">
								{{item.date===pageData.nowDate?'今天':item.date}}
							</view>
						</up-col>
						<up-col span="6">
							<view
								style="width: 100%;text-align: right;;font-size: 22rpx;color: #a7a7a7;padding-right: 10rpx;">
								{{getJournalDayTotal(item.items)}}
							</view>
						</up-col>
					</up-row>
				</view>

				<div v-for="sub in item.items">

					<up-row customStyle="line-height:90rpx" @click="rowClick(sub)">
						<up-col span="1">
							<view><up-icon name="coupon"></up-icon></view>
						</up-col>
						<up-col span="7">
							<view style="line-height: 90rpx;font-size: 29rpx;">{{sub.class_sub_title}}</view>
							<view
								style="line-height: 40rpx;height: 40rpx; overflow: hidden; font-size: 22rpx;color: #a7a7a7;margin-top: -15rpx;"
								v-if="sub.remark!==''">
								{{sub.remark}}
							</view>
							<view style="line-height: 40rpx;font-size: 22rpx;color:  #a7a7a7;">
								{{vk.pubfn.timeFormat(sub.datetime,"hh:mm:ss")}}
							</view>

						</up-col>
						<up-col span="4">
							<view style="width: 100%;text-align: right;font-size: 34rpx;"
								:style="{color:getTypeColor(sub.typid)}">
								{{getTypeSymbol(sub.typid)}}{{sub.amount.toFixed(2)}}
							</view>
						</up-col>
					</up-row>
					<up-line style="margin: 10rpx 0;"></up-line>
				</div>

			</view>



		</view>


		<tabbar></tabbar>
		<up-datetime-picker :show="pageData.datePicker.show" v-model="pageData.datePicker.value" mode="year-month"
			@cancel="pageData.datePicker.show=false" @confirm="confirmDatePicker"></up-datetime-picker>



	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		listJournal,
	} from '@/static/api/book';

	import {
		getJournalDayTotal,
		getJournalMonthTotal,
		getTypeColor,
		getTypeSymbol
	} from '@/static/js/funx';
	import {
		setTempJournal
	} from '@/static/js/journal';

	const dt = new Date()

	const pageData = ref({
		datePicker: {
			value: Number(new Date()),
			show: false,
		},
		nowDate: vk.pubfn.timeFormat(dt, "yyyy-MM-dd"),
		year: vk.pubfn.timeFormat(dt, "yyyy"),
		month: vk.pubfn.timeFormat(dt, "MM"),
		bookid: '',
		loading: true,
		journalList: [],
		journalHeight: 500,
		total: {
			zc: 0,
			sr: 0,
			jy: 0
		}
	})

	const initStyle = () => {
		const sys = uni.getSystemInfoSync()
		pageData.value.journalHeight = sys.windowHeight - sys.statusBarHeight - 160
	}


	const formatList = (rows) => {
		for (let i in rows) {
			rows[i].date = vk.pubfn.timeFormat(new Date(rows[i].datetime), "yyyy-MM-dd")
		}

		// 创建一个 Map 来存储分组后的数据
		const groupedData = new Map();

		// 遍历数据数组
		rows.forEach(item => {
			// 获取当前项的 date 值作为分组的键
			const dateKey = item.date;

			// 如果这个键还没有在 Map 中，初始化一个数组
			if (!groupedData.has(dateKey)) {
				groupedData.set(dateKey, []);
			}

			// 将当前项添加到对应的分组数组中
			groupedData.get(dateKey).push(item);
		});

		// 转换为数组格式（如果需要）
		const groupedArray = Array.from(groupedData, ([date, items]) => ({
			date,
			items
		}));

		return groupedArray


	}

	const getList = () => {
		listJournal(pageData.value.year, pageData.value.month).then(res => {
			const {
				zc,
				sr
			} = getJournalMonthTotal(res.rows)
			pageData.value.total.zc = zc
			pageData.value.total.sr = sr
			pageData.value.total.jy = sr - zc
			pageData.value.loading = false
			pageData.value.journalList = formatList(res.rows)
		})
	}

	const showClassName = (name) => {
		const arr = name.split('#')
		return arr[arr.length - 2]
	}

	const dateSelect = () => {
		pageData.value.datePicker.show = true
	}



	const confirmDatePicker = (e) => {
		pageData.value.datePicker.show = false
		pageData.value.year = vk.pubfn.timeFormat(e.value, "yyyy")
		pageData.value.month = vk.pubfn.timeFormat(e.value, "MM")
		getList()
	}

	const rowClick = (e) => {
		setTempJournal(e)
		vk.navigateTo('add');
	}


	onShow(() => {
		initStyle()
		vk.userCenter.getCurrentUserInfo({
			loading: false,
			success: (data) => {
				// 成功后的逻辑
				getApp().globalData.bookid = data.userInfo.default.bookid
				getList()
			}
		});


	})
</script>

<style>
	@import "@/static/css/journal_list.css";
</style>